<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> -->
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <!--[if lt IE 9]>
  <script src="js/lib/html5shiv.min.js"></script>
  <![endif]-->
  <meta name="apple-mobile-web-app-capable" content="yes">  <!-- 苹果允许全屏模式 -->
  <meta name="apple-mobile-web-app-status-bar-style" content="black">  <!-- 苹果浏览器顶部状态栏颜色 -->
  <meta name="format-detection" content="telephone=no">  <!-- 忽略数字为电话号码 -->
  <link rel="apple-touch-icon-precomposed" href="favicon.ico">
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
	<title>three.js example</title>
	<link rel="stylesheet" href="../../public/css/lib/normalize.css">
</head>
<body>
  <div id="statsOutput"></div>
    <!-- 引入脚本 -->
  <script src="../../public/js/lib/three-r71.min.js"></script>
  <script src="../../public/js/lib/stats.min.js"></script>
  <script src="../../public/js/lib/dat.gui.min.js"></script>
	<script>
  //three.js start here
  (function(){
    var clientW = document.documentElement.clientWidth;
    var clientH = document.documentElement.clientHeight;
    var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame;
    var scene = new THREE.Scene();    //场景
    var camera = new THREE.PerspectiveCamera(70, clientW/clientH, 1, 1000);    //摄像机
    var renderer = new THREE.WebGLRenderer();    //渲染器
    var axis = new THREE.AxisHelper(50);
    var fog = new THREE.FogExp2(0xff0000,0.01);
    var objects = [];    //物体管理器
    var stats = initStats();
    var controls = {
          rotationSpeed : 0.02,
          bouncingSpeed : 0.03
        };
    var gui = new dat.GUI();
    gui.domElement.clientLeft='0px';
    gui.add(controls, 'rotationSpeed',0,0.5);
    gui.add(controls, 'bouncingSpeed',0,0.5);

    renderer.setClearColor(0xEEEEEE, 1);
    renderer.setSize(clientW, clientH);
    renderer.shadowMapEnabled = true;

    camera.position.x = -30;
    camera.position.y = 40;
    camera.position.z = 30;
    camera.lookAt(new THREE.Vector3(0, 0, 0));

    scene.autoUpdate = true;
    scene.fog = fog;
    document.body.appendChild( renderer.domElement );

    function initStats() {
      var stats = new Stats();
      stats.setMode(0);
      stats.domElement.style.position = 'absolute';
      stats.domElement.style.left = '0px';
      stats.domElement.style.top = '0px';
      stats.domElement.style.width = '90px';
      document.getElementById('statsOutput').appendChild(stats.domElement);
      return stats;
    }
    function addObject(){
      var planeGeometry = new THREE.PlaneGeometry(60,20,1,1);
      var planeMaterial = new THREE.MeshLambertMaterial({color: 0xcccccc});
      var plane = new THREE.Mesh(planeGeometry,planeMaterial);
      plane.receiveShadow = true;
      plane.rotation.x = -0.5*Math.PI;
      plane.position.x = 15;
      plane.position.y = 0;
      plane.position.z = 0;
      scene.add(plane);
      var cubeGeometry = new THREE.CubeGeometry(4,4,4);
      var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
      var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
      cube.castShadow = true;
      cube.position.x = -4;
      cube.position.y = 3;
      cube.position.z = 0;
      scene.add(cube);
      var sphereGeometry = new THREE.SphereGeometry(4,20,20);
      var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
      var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
      sphere.castShadow = true;
      sphere.position.x = 20;
      sphere.position.y = 4;
      sphere.position.z = 2;
      scene.add(sphere);
      objects.push(plane, cube, sphere);
    }
    function addLight() {
      var spotLight = new THREE.SpotLight(0xffffff);
      spotLight.position.set( -40, 500, -10 );

      spotLight.castShadow = true;

      spotLight.shadowMapWidth = 1024;
      spotLight.shadowMapHeight = 1024;

      spotLight.shadowCameraNear = 500;
      spotLight.shadowCameraFar = 4000;
      spotLight.shadowCameraFov = 30;

      scene.add( spotLight );
    }
    var step = 0;
    function render() {
      requestAnimationFrame(render);
      stats.update();
      objects[1].rotation.x += controls.rotationSpeed;
      objects[1].rotation.y += controls.rotationSpeed;
      objects[1].rotation.z += controls.rotationSpeed;
      objects[2].position.x = 15 + Math.sin(step) * 10;
      objects[2].position.y = 2 +( 10*Math.abs(Math.sin(step)));
      step = step + controls.bouncingSpeed;
      renderer.render(scene, camera);
    }

    (function() {
      scene.add(axis);
      addObject();
      addLight();
      render();
    })();
  })();
  </script>
</body>
</html>